<template>
  <div class="home">
    <div class="tittle"></div>
    <!-- 定义页面的结构 -->
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          ><img
            height="130px"
            src="http://8.134.121.225/ej-app-employee/static/img/lunbo1.9e70f24d.png"
            alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img
            height="130px"
            src="http://8.134.121.225/ej-app-employee/static/img/lunbo1.9e70f24d.png"
            alt=""
        /></van-swipe-item>
      </van-swipe>
    </div>
    <!-- 菜单栏 -->
    <div class="menu">
      <van-grid>
        <van-grid-item
          icon="http://8.134.121.225/ej-app-employee/static/img/%E8%AE%A2%E5%8D%95.df9c13d5.png"
          text="订单"
          @click="toOrder"
        />
        <van-grid-item
          icon="http://8.134.121.225/ej-app-employee/static/img/%E8%AE%A2%E5%8D%95.df9c13d5.png"
          text="收益"
          @click="toHelp"
        />
        <van-grid-item
          icon="http://8.134.121.225/ej-app-employee/static/img/%E8%AE%A2%E5%8D%95.df9c13d5.png"
          text="帮助"
          @click="tohelpful"
          
        />
        <van-grid-item
          icon="http://8.134.121.225/ej-app-employee/static/img/%E8%AE%A2%E5%8D%95.df9c13d5.png"
          text="我的"
          @click="toMine"
        />
      </van-grid>
    </div>
    <!-- 底部产品展示区域 -->
    <div class="order">
      <div class="ordertitle">我的订单</div>
      <van-card
        v-for="order in orderData"
        :key="order.id"
        :thumb="order.customer.userFace"
        :status="order.status"
        @click="toDetail(order)"
      >
        <div slot="title">
          <span id="username"
            ><b>{{ order.customer.username }}</b></span
          >
          <span id="status">{{ order.status }}</span>
        </div>
        <div slot="desc" style="margin-top: 20px">
          <span>{{
            order.address.province +
            order.address.city +
            order.address.area +
            order.address.address
          }}</span>
        </div>
        <div slot="bottom">
          <span>{{ order.orderTime | dateFormat }}</span>
          <span id="price">{{ "¥" + order.total }}</span>
        </div>
      </van-card>
      <div style="height: 80px"></div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      active: 0,
      status: "",
    };
  },
  computed: {
    ...mapState("order", ["orderData"]),
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    // 引入peoduct vuex中的方法
    ...mapActions("order", ["getAllOrderData"]),
    ...mapActions("user", ["getUserInfo"]),

    //获取订单数据
    queryOrder() {
      let data = {
        page: 1,
        pageSize: 50,
        employeeId: this.userInfo.id,
      };
      this.getAllOrderData(data);
    },
    // 跳转到订单详情
    toDetail(order) {
      // 使用編程式导航进行路由的跳转
      this.$router.push({
        path: "/detail",
        query: {
          order,
        },
      });
    },
    toOrder() {
      this.$router.push({
        path: "/manager/order",
      });
    },
    toHelp() {
      this.$router.push({
        path: "/manager/help",
      });
    },
    toMine() {
      this.$router.push({
        path: "/manager/mine",
      });
    },
    tohelpful() {
      this.$router.push("/helpful");
    },
  },

  created() {
    this.getUserInfo().then((r) => {
      this.employeeId = this.userInfo.id;
      // 自动获取产品数据
    this.queryOrder();
    });
    
  },
};
</script>

<style lang="less">
.card-thumb {
  border-radius:50%;
}
.home .tittle {
  height: 130px;
  background-image: linear-gradient(
    to right top,
    #7579ff,
    #8a78ff,
    #9c77ff,
    #ae75ff,
    #bf73ff
  );
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
  text-align: center;
  color: #fff;
}
.swipe {
  width: 80%;
  height: 140px;
  background-color: #9002bf;
  position: absolute;
  top: 136px;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
}

.my-swipe img {
  height: 140px;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}
.menu {
  margin-top: 6em;
}
.order {
  margin-top: 1em;
  padding: 0 2em;
}
.van-card {
  margin: 20px 0;
  box-shadow: 0 0 6px 0 #ccc;
  display: flex;
  padding: 1em 1em;
  cursor: pointer;
}
#price {
  float: right;
}
#status {
  float: right;
  color: #f8825d;
}
#username {
  font-size: 18px;
}
</style>